<template>
  <div class="cart">
    <nav-bar
      :title="'购物车(' + cartCount + ')'"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <swipe-cell v-for="item in carts">
      <card
        :price="item.product.price.toFixed(2)"
        :title="item.product.name"
        class="goods-card"
        :thumb="dalImg(item.product.coverImage)"
      >
        <template #tag>
          <Checkbox v-model="item.checked"></Checkbox>
        </template>
        <template #footer>
          <!-- 禁用输入框  disable-input-->
          <Stepper
            v-model="item.amount"
            @plus="addToCrat(item.product, 1)"
            @minus="addToCrat(item.product, -1)"
          />
        </template>
      </card>
      <template #right>
        <Button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="delFromCart(item.id)"
        />
      </template>
    </swipe-cell>
    <submit-bar
      :price="sumPrice"
      :disabled="!sumPrice"
      button-text="结算"
      @submit="onSubmit()"
    >
      <checkbox v-model="checkAll">全选</checkbox>
    </submit-bar>
  </div>
</template>

<script setup>
import { ref, computed, inject } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import {
  SwipeCell,
  Card,
  Button,
  Toast,
  Checkbox,
  SubmitBar,
  NavBar,
  Stepper,
} from "vant";
import {
  addToCratAPI,
  loadCartAPI,
  delFromCartAPI,
} from "../server/shop-carts";
import { dalImg } from "../utils/tools";
import { useCart } from "../store/carts-num";

const store = useCart();
const { addCart, delCart } = store;
const { cartCount } = storeToRefs(store);
const checked = ref(false);
const carts = ref([]);
const router = useRouter();
// const cartCount = inject("cartCount");
// 购物车返回上一页
const onClickLeft = () => {
  // history.back();
  router.go(-1);
};
// 加载购物车数据
const loadDataFromServer = () => {
  loadCartAPI().then((res) => {
    // console.log(res.data);
    carts.value = res.data
      .filter((item) => item.product) //先过滤商品，选择有商品信息的数据
      .map((item) => ({ ...item, checked: false }));
    // 加载购物车数据时要设置购物车数量
    // cartCount.value = carts.value.reduce((pre, cur) => pre + cur.amount, 0);
  });
};
// 初始化先加载购物车数据
loadDataFromServer();
// 全选反选
const checkAll = computed({
  set(v) {
    carts.value.forEach((item) => (item.checked = v));
  },
  get() {
    return carts.value.every((item) => item.checked == true);
  },
});
// 总价计算
const sumPrice = computed(() => {
  return (
    carts.value
      .filter((item) => item.checked)
      .reduce((pre, cur) => pre + cur.amount * cur.product.price, 0) * 100
  );
});
// 数量加减，item 商品 ，amount 数量，1+，-1-
const addToCrat = async (item, amount) => {
  // 加入购物车的时候需要设置购物车数量
  // cartCount.value += amount;
  // await addToCratAPI({
  //   product: item.id,
  //   amount,
  //   price: item.price,
  // });
  addCart(item.id, amount, item.price);
};
// 提交订单(待完善)
const onSubmit = () => {
  // console.log(checked);
  router.push({
    name: "order",
  });
};
// 删除数据
const delFromCart = async (id) => {
  // await delFromCartAPI(id);
  delCart(id);
  loadDataFromServer();
  location.reload();
};
</script>

<style scoped lang="scss">
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>
